<template>
  <!--转卡支付页面-->
  <div>
    <wv-group class="mymsg">
      <wv-cell title="接收人姓名" :value="transfervipcard.receiveName"></wv-cell>
      <wv-cell title="接收人手机号" :value="transfervipcard.receivePhone"></wv-cell>
      <div class="beizhu" v-if="transfervipcard.remark!=''">
        <p>备注</p>
        <div>{{transfervipcard.remark}}</div>
      </div>
    </wv-group>
    <div class="divider"></div>
    <p class="zhuankafei">转卡费 <span>{{sysConfig.configVal}}元</span></p>
    <div class="divider"></div>
    <offer  :transfervipcard="transfervipcard" :goodsList="goodsList" :resultprice="sysConfig.configVal" :buySource="1"></offer>
  </div>
</template>

<script type="text/ecmascript-6">
  import offer from '../../offertemplate/offertemplate'
  import {getTransferCardFee} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        transfervipcard: {},
        sysConfig: {},
        goodsList:[]
      };
    },
    methods: {},
    created() {
      this.transfervipcard = JSON.parse(this.$route.query.transfervipcardInfo);
      console.log(this.transfervipcard);
      var accountGoodsId=this.transfervipcard.accountGoodsId;
      getTransferCardFee({accountGoodsId:accountGoodsId}).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.sysConfig = res.object.TransferCardFee;
          var accountGoods = res.object.accountGoods;
          var goods={goodsId:accountGoods.goodsId,goodsNum:accountGoods.goodsNum,orderType:5,unitPrice:this.sysConfig.configVal};
          this.goodsList.push(goods);
        } else {

        }
      })
    },
    components: {
      offer
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .zhuankafei {
    color: #e96774;
    padding: 10px;
    text-align: left;
    span {
      float: right;
      font-size: 15px;
      color: #ff8551;
    }
  }

  .divider {
    background-color: #eee;
    height: 10px;
  }

  .beizhu {
    margin: 5px 15px;
    padding: 10px 0;
    border-top: 1px solid #e5e5e5;
    color: #999;
    text-align: left;
    p {
      color: #111;
      margin-bottom: 10px;
    }
  }
</style>
